import * as React from 'react';
import { ComponentProps, ComponentState } from '@fluentui/react-utilities';

/**
 * {{componentName}} Props
 */
export interface {{componentName}}Props extends ComponentProps, React.HTMLAttributes<HTMLElement> {
  /*
   * TODO Add props and slots here
   * Any slot property should be listed in the {{camelCase componentName}}ShorthandProps array below
   * Any property that has a default value should be listed in {{componentName}}DefaultedProps as e.g. 'size' | 'icon'
   */
}

/**
 * Names of the shorthand properties in {{componentName}}Props
 */
export const {{camelCase componentName}}ShorthandProps = [] as const; // TODO add shorthand property names

/**
 * Names of the shorthand properties in {{componentName}}Props
 */
export type {{componentName}}ShorthandProps = typeof {{camelCase componentName}}ShorthandProps[number];

/**
 * Names of {{componentName}}Props that have a default value in use{{componentName}}
 */
export type {{componentName}}DefaultedProps = never; // TODO add names of properties with default values

/**
 * {{componentName}} State
 */
export type {{componentName}}State = ComponentState<
  React.Ref<HTMLElement>,
  {{componentName}}Props,
  {{componentName}}ShorthandProps,
  {{componentName}}DefaultedProps
>;
